<template>
    <div class="add-course-container">
        <h1 class="title">添加课程</h1>
        <form @submit.prevent="addCourse" class="form">
            <div class="form-group">
                <label for="courseName">课程名称:</label>
                <input type="text" id="courseName" v-model="course.courseName" required>
            </div>
            <div class="form-group">
                <label for="coachId">教练:</label>
                <input type="number" id="coachId" v-model="course.coachId" required>
            </div>
            <div class="form-group">
                <label for="subjectId">科目:</label>
                <input type="number" id="subjectId" v-model="course.subjectId" required>
            </div>
            <div class="form-group">
                <label for="content">课程简介:</label>
                <textarea id="content" v-model="course.content"></textarea>
            </div>
            <div class="form-group">
                <label for="coach">教练姓名:</label>
                <input type="text" id="coach" v-model="course.coach" required>
            </div>
            <button type="submit" class="submit-button">添加课程</button>
        </form>
        <div v-if="message" class="message">{{ message }}</div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 初始化课程对象
const course = ref({
    courseId: null,
    coachId: null,
    subjectId: null,
    courseName: '',
    content: '',
    coach: ''
});

// 消息提示
const message = ref('');

// 添加课程方法
const addCourse = async () => {
    try {
        const response = await axios.post('http://localhost:8787/api/manage/addCourse', course.value);
        if (response.data > 0) {
            message.value = '课程添加成功！';
            // 清空表单
            course.value = {
                courseId: null,
                coachId: null,
                subjectId: null,
                courseName: '',
                content: '',
                coach: ''
            };
        } else {
            message.value = '课程添加失败，请重试。';
        }
    } catch (error) {
        console.error('添加课程时出错:', error);
        message.value = '网络错误，请检查网络连接。';
    }
};
</script>

<style scoped>
.add-course-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

input,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: #007BFF;
}

.submit-button {
    padding: 12px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3;
}

.message {
    margin-top: 20px;
    padding: 12px;
    border-radius: 4px;
    text-align: center;
}

.message[style*="课程添加成功"] {
    background-color: #d4edda;
    color: #155724;
}

.message[style*="课程添加失败"] {
    background-color: #f8d7da;
    color: #721c24;
}

.message[style*="网络错误"] {
    background-color: #fff3cd;
    color: #856404;
}
</style>
